<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>H2OTools - 文本编辑器</title>
	<style type="text/css">
		html,body {
			margin: 0;
			padding: 0;
			width: 100%;
			height: 100%;
		}
		.editor_body {
			width: 100%;
			height: 100%;
			display: block;
		}
		#editor_buttons
		{
			display: block;
			width: 100%;
			padding: 4px 10px;
			box-shadow: 1px 0px 3px #a1a1a1;
			word-wrap: break-word;
			box-sizing: border-box;
			text-align: center;
		}
		#editor_buttons button {
			width: 15px;
			height: 15px;
			margin: 6px 20px;
			outline: 0;
			background: transparent;
			border: none;
			cursor: pointer;
			display: inline-block;
		}
		#editor_content {
			outline: 0;
			padding: 30px 15%;
			overflow: auto;
			box-sizing: border-box;
			font-size: 16px;
		}
	</style>
	<script type="text/javascript">
		var buttons = [
			{
				n:"bold",
				c:"Bold"
			},
			{
				n:"italic",
				c:"Italic"
			},
			{
				n:"underline",
				c:"Underline"
			},
			{
				n:"strikethrough",
				c:"Strikethrough"
			},
			{
				n:"align-left",
				c:"JustifyLeft"
			},
			{
				n:"align-center",
				c:"JustifyCenter"
			},
			{
				n:"align-right",
				c:"JustifyRight"
			},
			{
				n:"cut",
				c:"Cut"
			},
			{
				n:"copy",
				c:"Copy"
			},
			{
				n:"paste",
				c:"Paste"
			},
			{
				n:"undo-alt",
				c:"Undo"
			},
			{
				n:"redo-alt",
				c:"Redo"
			},
			{
				n:"link",
				c:"Createlink"
			},
			{
				n:"unlink",
				c:"Unlink"
			}
		];
		var s;
	</script>
</head>
<body>
	<div class="editor_body">
		<div id="editor_buttons"><button onclick="s = document.execCommand('fontsize','false')+1;document.execCommand('fontsize')"><img src="./icon/font-size-up.png" style="width:15px;height:15px;"></button><button onclick="s = document.execCommand('fontsize')-1;document.execCommand('fontsize','false',)"><img src="./icon/font-size-down.png" style="width:15px;height:15px;"></button></div><script type="text/javascript">
			var btn,img;
			for (var i = 0; i <= buttons.length - 1; i++) {
				btn = document.createElement("button");
				btn.title = buttons[i].c;
				btn.dataset.num = i;
				btn.onclick = function() {
					document.execCommand(buttons[this.dataset.num].c,"false","true");
				}
				img = document.createElement("img");
				img.src = "./icon/" + buttons[i].n + ".png";
				img.style = "width:15px;height:15px;";
				btn.appendChild(img);
				document.getElementById("editor_buttons").appendChild(btn);
			}
		</script><div id="editor_content" contenteditable="true" spellcheck="false" onblur="this.focus()"></div>
		<script type="text/javascript">
			function contentSize() {
				var h1 = document.body.clientHeight;
				var h2 = document.getElementById("editor_buttons").clientHeight;
				document.getElementById("editor_content").style.height = (h1 - h2) + "px";
			}
			contentSize();
			window.onresize = contentSize;
			document.getElementById("editor_content").focus();
		</script>
	</div>
</body>
</html>